<template>
  <div class="progress-bar-box"
       @mousedown="mousedownPoint"
       @mouseup="mouseupPoint"
       @mousemove="mousemoveProgressBar"
       @mouseleave="mouseleaveProgressBar">
    <div class="progress-bar"
         ref="progressBar">
      <div class="play-bar"
           :style="widthStyle">
        <div class="play-point"
             @mousedown="mousedownPoint"
             @mouseup="mouseupPoint"
             :style="pointPositionStyle">
        </div>
      </div>
      <div class="buffer-shadow-bar">
        <div v-for="(item,index) of bufferList"
             :key="index"
             :style="item"
             :data-index="index"
             class="buffer-item">
        </div>
      </div>
      <div class="buffer-bar"
           :style="bufferWidthStyle">
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-console */
export default {
  props: {
    totalTime: {
      // 总时长
      type: Number,
      default: 0
    },
    nowTime: {
      type: Number,
      default: 0
    },
    videoTime: {
      // 单个视频时长
      type: Number,
      default: 60
    },
    bufferLength: {
      type: Number,
      default: 0
    },
    totalVideoNum: {
      type: Number,
      default: 0
    },
    list: {
      // 视频key列表
      type: Array,
      default: () => []
    },
    isUpdate: {
      // 是否更新进度条信息
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      widthStyle: {
        width: '0px'
      },
      bufferWidthStyle: {
        width: '0px'
      },
      pointPositionStyle: {
        left: '0px'
      },
      progressBarWidth: 0,
      bufferList: [],
      playBarWidth: 0,
      proportion: 0,
      isActivePoint: false,
      totalTimeSec: 0,
      progressBarRef: '',
      videoNum: 0
    }
  },
  watch: {
    // eslint-disable-next-line no-unused-vars
    list (val) {
      if (!val.length && this.videoNum && this.progressBarRef !== '') {
        this.bufferList = []
        this.playBarWidth = 0
        this.widthStyle = Object.assign({}, {}, {
          width: '0px'
        })
        this.bufferWidthStyle = Object.assign({}, {}, {
          width: '0px'
        })
        this.pointPositionStyle = Object.assign({}, {}, {
          left: '0px'
        })
        for (let index = 0; index < this.videoNum; index++) {
          this.bufferList.push({ 'background-color': '#1f1f1f', 'width': `${this.totalVideoNum / 100}%` })
        }
        return
      }

      val.map(item => {
        if (this.bufferList[item]) {
          if (!(this.bufferList[item]['background-color'] === '#9e9e9e')) {
            this.bufferList[item]['background-color'] = '#9e9e9e'
          }
        }
      })
    },
    nowTime (val) {
      this.updatePlayBar(val)
    },
    bufferLength (val) {
      this.updateBufferBar(val)
    },
    totalTime (val) {
      this.totalTimeSec = Math.floor(val)
    },
    totalVideoNum (val) {
      this.videoNum = val
    },
    isUpdate () {
      const width = this.progressBarRef.clientWidth
      this.totalTimeSec = Math.floor(this.totalTime)
      this.proportion = width / this.totalTimeSec
      if (this.bufferList.length) {
        this.list.map(item => {
          this.bufferList[item]['background-color'] = '#9e9e9e'
        })
      }
      this.updatePlayBar(this.nowTime)
      this.updateBufferBar(this.bufferLength)
    }
  },
  mounted () {
    const progressBarRef = this.$refs.progressBar
    this.progressBarRef = progressBarRef
    this.progressBarWidth = progressBarRef.clientWidth
    this.proportion = progressBarRef.clientWidth / this.totalTimeSec
  },
  methods: {
    // 点击进度条位置
    mousedownPoint (event) {
      let e = event || window.event
      let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
      let x = e.pageX || e.clientX + scrollX
      const width = this.progressBarRef.clientWidth

      x -= (this.progressBarRef.getBoundingClientRect().left)

      if (x > width) {
        x = width
      }

      if (x < 0) {
        x = 0
      }
      this.playBarWidth = x
      this.widthStyle = Object.assign({}, this.widthStyle, {
        width: `${x}px`
      })
      this.pointPositionStyle = Object.assign({}, this.pointPositionStyle, {
        left: `${x - 10}px`
      })
      this.isActivePoint = true
      this.$emit('pauseVideo')
    },
    mouseupPoint () {
      if (!this.isActivePoint) { return }
      this.isActivePoint = false
      this.$nextTick(() => {
        this.$emit('playVideo', this.getSecTime())
      })
    },
    mouseleaveProgressBar () {
      if (!this.isActivePoint) { return }
      this.isActivePoint = false
      this.$nextTick(() => {
        this.$emit('playVideo', this.getSecTime())
      })
    },
    mousemoveProgressBar (event) {
      if (!this.isActivePoint) { return }
      let e = event || window.event
      let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
      let x = e.pageX || e.clientX + scrollX
      const width = this.progressBarRef.clientWidth
      x -= (this.progressBarRef.getBoundingClientRect().left)

      if (x > width) {
        x = width
      }

      if (x < 0) {
        x = 0
      }
      this.playBarWidth = x
      this.widthStyle = Object.assign({}, this.widthStyle, {
        width: `${x}px`
      })
      this.pointPositionStyle = Object.assign({}, this.pointPositionStyle, {
        left: `${x - 10}px`
      })
      event.stopPropagation()
    },
    // 更新缓冲条
    updateBufferBar (val) {
      // 计算播放条长度与当前缓冲时间的比例
      const bufferProportion = this.progressBarRef.clientWidth / this.totalTimeSec
      const bufferWidth = bufferProportion * val
      this.bufferWidthStyle = Object.assign({}, this.bufferWidthStyle, {
        width: `${bufferWidth}px`
      })
    },
    // 更新进度条
    updatePlayBar (val) {
      const nowTime = val
      // 计算播放条长度与当前播放时间的比例
      const width = nowTime * this.proportion
      const progressBarWidth = this.progressBarRef.clientWidth
      const pointMaxLeft = progressBarWidth
      let pointLeft = 0
      pointLeft = width > pointMaxLeft ? pointMaxLeft : width
      this.widthStyle = Object.assign({}, this.widthStyle, {
        width: `${width}px`
      })
      this.pointPositionStyle = Object.assign({}, this.pointPositionStyle, {
        left: `${pointLeft - 10}px`
      })
    },
    // 格式化时间
    formatDate (sec) {
      const m = Math.floor(sec / this.videoTime)
      const s = sec % this.videoTime
      return { m, s }
    },
    // TODO 格式化时间
    formatHoverDate (sec) {
      if (sec < 0) {
        return '00:00'
      }
      const h_ = Math.floor(sec / 3600)
      const m_ = Math.floor(sec / 60)
      const s_ = sec % 60
      const h = h_ > 9 ? h_.toFixed() : `0${h_.toFixed()}`
      const m = m_ > 9 ? m_.toFixed() : `0${m_.toFixed()}`
      const s = s_ > 9 ? s_.toFixed() : `0${s_.toFixed()}`

      if (h > 0) {
        return `${h}:${m >= 60 ? '00' : m}:${s >= 60 ? '00' : s}`
      }
      return `${m >= 60 ? '00' : m}:${s >= 60 ? '00' : s}`
    },
    // 判断当前在第几秒
    getSecTime () {
      const sec = this.playBarWidth / this.proportion
      return {
        totalSeconds: sec,
        ...this.formatDate(sec)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-bar-box {
  height: 10px;
  width: 100%;
  padding: 20px 10px;
  padding-top: 10px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
.play-bar,
.buffer-bar,
.buffer-shadow-bar,
.progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: #1f1f1f;
  border-radius: 4px;
  // overflow: hidden;
}

.buffer-shadow-bar {
  position: absolute;
  display: flex;
  z-index: 2;
  .buffer-item {
    height: 8px;
  }
}
.play-bar {
  background-color: #15589c;
  // transition: all 0.4s;
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
}
.buffer-bar {
  background-color: #9e9e9e;
  transition: all 0.4s;
  position: absolute;
  z-index: 1;
}

.play-bar .play-point {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background-color: rgba(96, 173, 255, 1);
  z-index: 3;
  cursor: pointer;
  // transition-duration: 0.4s;
  transition-property: width, height, left;
}

.play-bar .play-point:focus,
.play-bar .play-point:active,
.play-bar .play-point:hover {
  width: 15px;
  height: 15px;
}
</style>
